<template>
    <el-row v-if="posts&&posts.length>0">
        <el-col :span="24" v-for="post in posts" :key="post.id">
            <post-item-plus :post="post"
                            class="post-item-plus"
                            link
                            linkCollect
                            @reload="obtainPosts"
                            @changeLabelAttention="changeLabelAttention"></post-item-plus>
        </el-col>
    </el-row>
    <div class="none" v-else>
        <div>您没有收藏过帖子</div>
    </div>
</template>

<script>
    import { mapGetters, mapActions } from 'vuex'
    import PostItemPlus from '@/components/post/PostItemPlus'

    export default {
        name: 'collect',
        components: {
            PostItemPlus
        },
        data () {
            return {
                posts: []
            }
        },
        watch: {
            $route (to, from) {
                if (this.getUser) {
                    this.action(this.currentCollectPostsAction())
                }
                this.obtainPosts()
            }
        },
        mounted () {
            if (this.getUser) {
                this.action(this.currentCollectPostsAction())
            }
            this.obtainPosts()
        },
        computed: {
            ...mapGetters({
                getUser: 'user/getUser'
            }),
            btnType () {
                return this.management ? 'danger' : 'success'
            }
        },
        methods: {
            ...mapActions('post', {
                currentCollectPostsAction: 'currentCollectPosts'
            }),
            obtainPosts () {
                this.action(this.currentCollectPostsAction(), data => {
                    this.posts = data.data
                })
            },
            changeLabelAttention (data) {
                this.posts.forEach(post => {
                    post.labels.forEach(label => {
                        if (label.id === data.id) {
                            label.attentionCount += data.inc
                        }
                    })
                })
            }
        }
    }
</script>

<style lang="scss" scoped>
    .management-btn {
        float: right;
    }

    .none {
        height: 300px;
        line-height: 300px;
    }

    .post-item-plus {
        height: 90px;
    }
</style>
